<template>
	<view class="test-f1">
		<view class="VoiceInput" @touchend="toTextEnd" @touchcancel="toTextEnd" @longpress="voiceRecognition">
			<image class="voiceBtn" src="./image/voice.png" mode="aspectFit"></image>
		</view>
		{{text}}
		<view class="voiceHintBox" v-if="isShowVoice">
			<image class="voiceIcon" src="./image/voiceIcon.png" mode=""></image>
			<view class="voiceIconText">
				录音中...
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../config/config.js"
	export default {
		name: "recordToText",
		data() {
			return {
				isShowVoice: false, //是否显示录音图标
				voicePath: "",
				text: ""
			};
		},
		props: ["record_id"],
		created() {
			// #ifdef APP-PLUS
			/**
			 * event
			 */
			let that = this
			plus.speech.addEventListener("end", function(e) {
				that.text += e.result;
				console.log(e,"")
			}, false);;
			// #endif
		},
		methods: {
			voiceRecognition() {
				this.isShowVoice = true
				// #ifdef APP-PLUS
				let that = this
				let options = {
					continue: true, //语音识别是否采用持续模式---- 设置为true表示语音引擎不会根据语音输入自动结束，识别到文本内容将多次调用successCallback函数返回，如果需要结束语音识别则必须调用stopRecognize接口，默认值为false。
					engine: "baidu", //语音识别引擎标识---- 用于兼容多语音识别引擎的浏览器，使用语音识别厂商的产品名称，如未设置或设置不正确则使用运行环境默认的语音识别引擎。 支持以下语音识别引擎： "baidu"-百度语音识别； "iFly"-讯飞语音识别。
					lang: "zh-cn", //语音识别引擎的语言 ----用于定义语音识别引擎的语言，其取值需符合W3C的Language codes规范。 目前讯飞语音支持以下语言： "zh-cn"-中文，普通话； "en-us"-英语； "zh-cantonese"-中文，粤语； "zh-henanese"-中文，河南话（百度语音识别不支持此语言）。 默认值为"zh-cn"。
					nbest: 1, //指定识别结果识别包括多候选结果---- 用于指定识别结果识别包括多候选结果。如nbest:3，识别返回3个候选结果，默认值为1。
					punctuation: true, //识别结果中是否包含标点符号--- true表示识别结果文本中包含标点符号，false表示识别结果文本中不包含标点符号。 默认值为true。百度语音识别不支持标点符号。
					timeout: 3000, //语音识别超时的时间，单位为ms，默认值为1000（即10秒）。 注：百度语音识别不支持此参数。
					userInterface: false, //识别时是否显示用户界面  用于指定识别时是否显示用户界面，设置为true表示显示浏览器内置语音识别界面；设置为false表示不显示浏览器内置语音识别界面。默认值为true。
				}
				plus.speech.startRecognize(options, (s) => {
					that.text += s;
					console.log(s, "语音识别成功")
				}, (e) => {
					console.error(e)
				});
				// #endif
			},
			toText() {

				this.voiceRecognition()
			},
			toTextEnd() {
				if (!this.Record) {
					return
				}
				console.log("结束")
				this.isShowVoice = false
				// #ifdef APP-PLUS
				plus.speech.stopRecognize(); //当语音识别完成时或用户取消语音识别时调用，调用此方法将导致errorCallback回调函数的调用。
				// #endif

			},
		}
	}
</script>

<style scoped>
	.VoiceInput {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

	}

	.voiceBtn {
		width: 70rpx;
		height: 70rpx;
	}

	@keyframes voiceIcon {
		from {
			transform: translateX(-50%) translateY(-50%) scale(0.5);
		}

		to {
			transform: translateX(-50%) translateY(-50%) scale(1);
		}
	}

	.voiceIcon {
		width: 100rpx;
		height: 100rpx;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		animation: voiceIcon 1s infinite alternate linear;
	}

	.voiceHintBox {
		width: 300rpx;
		position: fixed !important;
		height: 300rpx;
		top: 20%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 30rpx;
	}

	.voiceIconText {
		width: 100%;
		position: absolute;
		text-align: center;
		bottom: 30rpx;
		color: #FFFFFF;
	}
</style>
